<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="res/layui/css/layui.css">
</head>
<body>

<div class="layui-container">
  <fieldset class="layui-elem-field layui-field-title">
    <legend>管理员列表</legend>
  </fieldset>
  <!--用于渲染数据的表格组件-->
  <table id="adminTab"></table>
</div>

<script src="res/layui/layui.js"></script>
<script>
  layui.use(function(){
    //加载表格组件
    let table = layui.table
    //渲染数据表格
    table.render({
      elem:'#adminTab'    //绑定需要显示数据的表格元素（css选择器）
      ,url:'/admin/list'  //服务端数据接口地址
      ,page:{         //分页配置
        limit:2,        //每页条数
        limits:[2,5,10,15,20]  //每页条数选择项
      }
      ,cols:[[
        {type: 'checkbox'}                  //复选框组件（layui内置）
        ,{title:'序号',type:'numbers'}        //序号组件（layui内置）
        ,{title:'用户名',field:'username'}    //用户名字段名，匹配数据属性字段
        ,{title:'邮箱',field:'email'}
        ,{title:'电话',field:'phone'}
        ,{title: '状态',field:'status'}
      ]]
    })
  })
</script>
</body>
</html>